<template>
  <div class="analysis-container">
    <el-form :inline="true" :model="queryParams">
      <el-form-item>
        <el-date-picker
          v-model="queryParams.date"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryParams.studentEventCode" placeholder="请选择行为" clearable>
          <el-option
            v-for="item in actionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryParams.eqptName" placeholder="请输入设备名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-if="checkAuthority('/select')" type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="index"
        type="index"
        label="序号"
        width="100"
      >
        <template slot-scope="scope">
          {{ pageSize * (pageNum - 1) + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="deviceId"
        label="监测视频设备">
      </el-table-column>
      <el-table-column
        prop="deviceName"
        label="设备名称"
      >
      </el-table-column>
      <el-table-column
        prop="eventTypeName"
        label="异常行为">
      </el-table-column>
      <el-table-column
        prop="happenTimeStr"
        label="时间">
      </el-table-column>
      <el-table-column
        prop="areaAddr"
        label="地点">
      </el-table-column>
      <el-table-column
        prop="eventImgUrl"
        label="抓拍图片"
      >
      <template #default="{ row }">
        <el-image
          v-if="row.eventImgUrl"
          style="width: 60px; height: 60px"
          :src="row.eventImgUrl"
          :preview-src-list="[row.eventImgUrl]">
        </el-image>
      </template>
      </el-table-column>
      <el-table-column
        prop="alarmFlag"
        label="是否告警">
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: right"
      v-if="tableData.length > 0"
      layout="total, prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { queryAnalyseList } from '../js/videoCenter'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限

export default {
  data: () => ({
    queryParams: {
      eqptName: '',
      studentEventCode: '',
      date: []
    },
    pageNum: 1,
    pageSize: 10,
    total: 0,
    tableData: [],
    actionList: [
      { value: 131596, label: '剧烈运动' },
      { value: 131605, label: '人员跌倒' },
      { value: 131668, label: '人员奔跑' },
      { value: 131593, label: '人员聚集' },
      { value: 1644175361, label: '重点人员识别事件' }
    ]
  }),
  methods: {
    checkAuthority,
    handleSearch () {
      this.pageNum = 1
      this.getTableData()
    },
    handleCurrentChange (pageNum) {
      // 分页
      this.pageNum = pageNum
      this.getTableData()
    },
    async getTableData () {
      // 获取列表数据
      const { date, eqptName, studentEventCode } = this.queryParams
      try {
        const res = await queryAnalyseList({
          eqptName,
          studentEventCode,
          startTime: date?.length ? date[0] : '',
          endTime: date?.length ? date[1] : '',
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.handleSearch()
  }
}
</script>

<style lang="scss" scoped>
.analysis-container {}
</style>
